<template>
  <div class="goods-detail">
    <!-- 属性 -->
    <ul class="attrs">
      <li v-for="item in result1" :key="item">
        <span class="dt">{{ item.name }}</span>
        <span class="dd">{{ item.value }}</span>
      </li>
    </ul>
    <!-- 图片 -->
    <img :src="item" alt="" v-for="item in result2" :key="item" />
  </div>
</template>

<script>
import { inject, ref } from "vue";

export default {
  name: "GoodsDetail",
  setup() {
    let goodData = inject("goodData");

    let result1 = ref(goodData.value.details.properties);
    let result2 = ref(goodData.value.details.pictures);

    return {
      result1,
      result2,
    };
  },
};
</script>

<style scoped lang="less">
.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  > img {
    width: 100%;
  }
}
</style>
